<div id="header">
  <a href="{{ notebook_base_url }}/" class="header-link">
    <b>/</b>
  </a>

  {% if userdata['is_developer'] == 1 %}
  <div class="header-dropdown">
    <div class="header-dropdown-item-margin">
      <span class="disabled-header-dropdown-item">Auth</span>
      <div class="header-dropdown-menu">
        <div class="auth-caret header-dropdown-menu-caret"></div>
        <a class="header-dropdown-menu-link" href="{{ auth_base_url }}/roles">Roles</a>
        <a class="header-dropdown-menu-link" href="{{ auth_base_url }}/users">Users</a>
      </div>
    </div>
  </div>
  {% endif %}

  <div class="header-dropdown">
    <div class="header-dropdown-item-margin">
      <a href="{{ batch_base_url }}" class="header-dropdown-link">Batch</a>
      <div class="header-dropdown-menu">
        <div class="batch-caret header-dropdown-menu-caret"></div>
        {% if userdata['is_developer'] == 1 %}
        <a class="header-dropdown-menu-link" href="{{ batch_driver_base_url }}">Driver</a>
        <a class="header-dropdown-menu-link" href="{{ batch_base_url }}/billing_projects">Billing Projects</a>
        {% endif %}

        {% if userdata['username'] %}
        <a class="header-dropdown-menu-link" href="{{ batch_base_url}}/billing_limits">Billing Limits</a>
        <a class="header-dropdown-menu-link" href="{{ batch_base_url }}/billing">Billing</a>
        {% endif %}

        {% if userdata['is_developer'] == 1 %}
        <a class="header-dropdown-menu-link" href="{{ batch_driver_base_url }}/user_resources">User Resources</a>
        <a class="header-dropdown-menu-link" href="{{ batch_driver_base_url }}/quotas">Quotas</a>
        {% endif %}
        <a class="header-dropdown-menu-link" href="{{ www_base_url }}/docs/batch/">Docs</a>
      </div>
    </div>
  </div>

  {% if userdata['is_developer'] == 1 %}
  <div class="header-dropdown">
    <div class="header-dropdown-item-margin">
      <a href="{{ ci_base_url }}" class="header-dropdown-link">CI</a>
      <div class="header-dropdown-menu">
        <div class="ci-caret header-dropdown-menu-caret"></div>
        <a class="header-dropdown-menu-link" href="{{ ci_base_url }}/me">Me</a>
        <a class="header-dropdown-menu-link" href="{{ ci_base_url }}/namespaces">Namespaces</a>
      </div>
    </div>
  </div>
  {% endif %}

  {% if userdata['is_developer'] == 1 %}
  <div class="header-dropdown">
    <div class="header-dropdown-item-margin">
      <span class="disabled-header-dropdown-item">Monitoring</span>
      <div class="header-dropdown-menu">
        <div class="monitoring-caret header-dropdown-menu-caret"></div>
        <a class="header-dropdown-menu-link" href="{{ grafana_base_url }}">Grafana</a>
        <a target="_blank" class="header-dropdown-menu-link" href="https://console.cloud.google.com/logs">
          Log Viewer<i class="material-icons text-icon">open_in_new</i></a>
        <a class="header-dropdown-menu-link" href="{{ monitoring_base_url }}/billing">Billing</a>
      </div>
    </div>
  </div>
  {% endif %}

  <div id="header-flex"></div>

  {% if userdata %}
  <a href="{{ auth_base_url }}/user" class="header-link">
    <b>{{ userdata["username"] }}</b>
  </a>
  {% else %}
  <a class="header-link" href="{{ auth_base_url }}/user">
    Log in or sign up
  </a>
  {% endif %}
</div>
